const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const outputDist = path.join(__dirname, 'dist');

module.exports = {
  mode: 'development', // development、production
  
  entry: {
    vendor: ['deepcopy', path.resolve(__dirname, './src/common.js')], // 多个页面都使用的组成一个， 比如 jquery，或者公共的库
    index: './src/index.js',
  },

  output: {
    filename: '[name].[contenthash:8].js', // 打包的文件名
    path: outputDist, // 打包存放的位置
  },

  // 模块 loader，webpack 只能识别 javascript 的资源， 所以需要 loader 翻译一些资源给 webpack 识别，比如 image，sass等
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.scss$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset', // 根据图片大小是 url 路径还是 base64 方式引入
        generator: {
          filename: 'images/[hash:8][ext][query]' // 局部指定输出位置
        },
        parser: {
          dataUrlCondition: {
            maxSize: 500 * 1024 // 限制于 500kb
          }
        }
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource', // 字体图标直接使用 url 路径引入
      },
    ]
  },

  // 插件，可以配合loader完成更广泛的任务，也可以独立工作（打包优化，压缩，重新定义环境中的变量等）
  plugins: [
    new webpack.ProgressPlugin(),
    new ESLintPlugin({
      extensions: 'js',
      fix: true
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'), // 指定模板路径
      filename: 'main.html',
      chunks: ['vendor', 'index'], // 多入口的时候，指定打包输出的那些 chunk 需要引入, 与配置 entry 的 key 属性对应即可
    }),
  ],

  context: process.cwd(), // 上下文目录, 根目录
  target: 'web', // 开发时配置页面热更新，认为只有 web 页面需要
  devServer: {
    static: {
      directory: outputDist, // 一般是打包的绝对路径
    },
    historyApiFallback: true,
    host: '0.0.0.0',
    port: 9000,
    open: ['main.html'], // 自动打开哪个页面， 设置 open: true 时，默认打开 index.html
    
    client: {
      overlay: true,
    },
    
    compress: true, // gizp 压缩
    // 启用热更新就不能配置（hot: true）热重载
    liveReload: true, // 配合 target: 'web', 热更新，
  },

  performance: {
    hints: false
  }
}